<template>
	<view class="i-order-icon" :style="[bodyStyle]">
		<view :style="[bodyBoxStyle]" class="overflow-hidd bg-white e-p-t-10">
			<view class="title-box e-flex  e-flex-between" :style="[{ backgroundColor: option.titleBackgroundColor }]">
				<view class="e-font-30 fw-500" :style="[{ color: option.titleTextColor }]">{{ $t('layout.我的订单') }}</view>
				<view class="e-flex" @tap="$goTo('/pages/order/index')">
					<text class="e-font-24" :style="[{ color: option.textColor }]">{{ $t('layout.全部订单') }}</text>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="button-list e-flex  " :style="[{ backgroundColor: option.contentBackgroundColor }]">
				<view class="e-rela" @tap="$goTo(item.path)" v-for="(item,index) in list" :key="index">
					<view class="image">
						<e-badge :bgColor="AppSkin.primary" :absolute="true" :offset="[2,10]" max="99"
							:value="item.value" >
							<load-image mode="aspectFill" :size="['60rpx']"  :src="item.icon" ></load-image>
						</e-badge>
						
					</view>
					
					<view class="text-center" :style="[{ color: option.buttonTextColor }]">
						{{item.text}}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, watch,computed } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useLayoutCompoments } from './hooks'
	import {
		useUser,
		useInit
	} from '@/common/stores'
	import { storeToRefs } from 'pinia'

	const props = withDefaults(defineProps<{
		onShow : boolean|Function
		downRefresh : boolean|Function
		option : {
			list : string[]
			titleList : string[]
			backgroundColor : string
			titleBackgroundColor : string
			contentBackgroundColor : string
			titleTextColor : string
			textColor : string
			buttonTextColor : string
			paddingTop : number
			paddingBottom : number
			paddingX : number
			radiusTop : number
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			list: ['', '', '', '', ''],
			titleList: [],
			backgroundColor: '',
			titleBackgroundColor: 'rgba(255, 255, 255, 1)',
			contentBackgroundColor: 'rgba(255, 255, 255, 1)',
			titleTextColor: 'rgba(53,53,53, 1)',
			textColor: 'rgba(179, 179, 179, 1)',
			buttonTextColor: 'rgba(69, 69, 69, 1)',
			paddingTop: 0,
			paddingBottom: 10,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})

	const ctx = useCurrentInstance()

	const { viewStyle: bodyStyle, bodyBoxStyle } = useLayoutCompoments(ctx, props.option)

	const { isLogin,orderCount } = storeToRefs(useUser())
	const { AppSkin,isRefund } = storeToRefs(useInit())


	
	const itemList = [{
		path:'/pages/order/index?type=1',
		text:'order.待付款'
	},{
		path:'/pages/order/index?type=2',
		text:'order.待发货'
	},{
		path:'/pages/order/index?type=3',
		text:'order.待收货'
	},{
		path:'/pages/order/index?type=4',
		text:'order.待评价'
	},{
		path:'/pages/order/refund/index',
		text:'layout.退款/售后'
	}]
	
	const list = computed(() => {
		const maxNumber = isRefund.value ? 5 : 4;
		return [...new Array(maxNumber).keys()].map((item,index) => {
			return {
				path:itemList[index].path,
				icon:props.option?.list[index]||'',
				value:orderCount.value[index],
				text:props.option.titleList[index]||ctx.$t(itemList[index].text)
			}
		})
	})


</script>

<style lang="scss" scoped>
	.title-box {
		height: 80rpx;
		padding: 0 20rpx;
	}

	.arrow {
		width: 0;
		height: 0;
		border: solid #d2d5db;
		border-width: 0 4rpx 4rpx 0;
		padding: 6rpx;
		transform: rotate(-45deg);
	}

	.button-list {
		padding: 30rpx 0;

		>view {
			flex: 1;

			.image {
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto 10rpx auto;
			}
		}
	}
</style>